<template>
    <div>
        <ButtonGroup>
        <Button type="primary" @click="changeType(0)">新闻分类</Button>
        <Button type="primary" @click="changeType(2)">产品分类</Button>
        <Button type="primary" @click="changeType(3)">地区分类</Button>
    </ButtonGroup>
        <Tree :data="data" :render="renderContent"></Tree>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="分类标题" prop="title">
            <Input v-model="formValidate.title" placeholder="请输入分类标题"></Input>
        </FormItem>
        <FormItem label="分类父ID" prop="parentId">
            <Input v-model="formValidate.parentId"></Input>
        </FormItem>
          <FormItem label="分类类型ID" prop="type">
            <Input v-model="formValidate.type"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form> 
    </div>
</template>
<script>
// import Base from './Base'
      export default {
//         mixins:[Base],
        data () {
            return {
                //  module:'cate',
                formValidate: {
                    title: '',
                    type:0,
                    parentId:''
                  
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                   
                 
            },
                data:[],
               num:0,
                buttonProps: { 
                    type: 'ghost',
                    size: 'small',
                }
            }
        },
        created(){
            //生命周期
         //在初始化阶段，去请求node.js的api，返回json数据
          this.getData();
        }, 
        methods: { 
            getData(type){
                var type = type || 0; 
                this.$http.get(`http://10.31.160.25:3000/cate/list/${type}`)
          .then((response)=>{
              this.data=response.data;
              console.log(response.data) 
          })
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    } 
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    
                                    this.formValidate.parentId =data._id
                                   // this.append(data) 
                                   }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            // append (data) {
            //     const children = data.children || [];
            //     children.push({
            //         title: 'appended node',
            //         expand: true
            //     });
            //     this.$set(data, 'children', children);
            // },
            remove (root, node, data) {
                

                this.$http({
                    method:'delete',
                    url:`http://10.31.160.25:3000/cate/data/${data._id}`

                }).then( res=>
                {
                    
                   this.getData(this.num);
                   this.formValidate.type =this.num ;
                   this.$Message.success('delete success!');
                })
            },
            handleSubmit (name,type) {
                this.$refs[name].validate((valid)  => {
                    if (valid) {
                        //ajax数据请求 
                         this.$http. post("http://10.31.160.25:3000/cate/data", this.formValidate ).then(res=>{
                         
                           this.getData(this.num);
                   this.formValidate.type =this.num ;
                           
                            this.$Message.success('Success!');
//重置表单。合并
                            Object.assign(this.$data.formValidate,
                            this.$options.data().formValidate
                            );
                        })
                      
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            changeType(type){
                    this.getData(type);
                    this.num=type;
                    this.formValidate.type =type 
            }
        }
        
    }

</script>